<template>
    <userDialog
        v-model="visible"
        dialogTitle="查看角色"
        width="880px"
        @handleCloseDialog="close"
    >
        <template v-slot:userDiagContent>
            <dialogFormContent v-for="item in formInfo" :title="item.title">
                <template #form_info="{ isShowInfoFold }">
                    <infoList
                        v-if="isShowInfoFold"
                        :infoList="item.infoList"
                    ></infoList>

                    <div
                        class="infinite-list"
                        style="overflow: auto"
                        v-if="isShowInfoFold && item.title === '权限信息'"
                    >
                        <el-table
                            :data="viewUnitsRes.list"
                            border
                            style="width: 100%"
                            :header-cell-style="{
                                color: '#222222',
                                height: '46px',
                            }"
                            :cell-style="{
                                color: '#606266',
                            }"
                            :row-style="{ height: '65px' }"
                        >
                            <el-table-column prop="username" label="用户名称" />
                            <el-table-column prop="realname" label="真实姓名" />
                            <el-table-column prop="phone" label="手机号" />
                            <el-table-column
                                prop="type_name"
                                label="用户角色"
                                width="473"
                            />
                        </el-table>
                    </div>

                    <div
                        class="creatInfo"
                        v-if="isShowInfoFold && item.title === '权限信息'"
                    >
                        <p v-for="(item, index) in createdInfo">
                            <span>{{ item.label }}:</span>
                            <span>{{ item.value }}</span>
                        </p>
                    </div>
                </template>
            </dialogFormContent>

            <div class="confirmBtn">
                <el-button type="primary" @click="close()"> 关闭 </el-button>
            </div>
        </template>
    </userDialog>
</template>

<script setup lang="ts">
import { getInfoList, formTitleList } from "@/views/system/unitsManager/index";
const visible = defineModel("modelValue", {
    type: Boolean,
    required: true,
    default: false,
});

const props = defineProps({
    viewUnitsRes: {
        required: false,
        default: () => [] as any,
    },
});

// 基本信息   权限信息
const formInfo = computed(() => {
    let arr = formTitleList.map((item: any) => {
        return {
            title: item,
            infoList: getInfoList(props.viewUnitsRes, item),
        };
    });
    return arr.filter((item: any) => {
        return item.title !== "创建信息";
    });
});

// 创建信息
const createdInfo = computed(() => {
    return getInfoList(props.viewUnitsRes, "创建信息");
});

function close() {
    visible.value = false;
}
</script>

<style lang="scss" scoped>
.infinite-list {
    height: 200px;
    width: 808px;
    padding: 0;
    margin: 0;
    list-style: none;
    &::-webkit-scrollbar-thumb:hover {
        background-color: #b0abab !important;
    }
}
.creatInfo {
    @include flexLayout;
    flex-wrap: wrap;
    background: #ecf4ff;
    border-radius: 2px;
    padding: 13px 16px;
    margin-top: 13px;
    font-weight: 500;
    font-size: 14px;
    color: #606266;
    p {
        margin-left: 20px;
        span {
            margin-left: 10px;
        }
        :first-child {
            margin-left: 0px;
        }
    }
    :first-child {
        margin-left: 0px;
    }
}

.confirmBtn {
    margin-top: 20px;
    @include flexLayout;
    .el-button {
        padding: 10px 42px;
    }
}
</style>
